<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>头部导航栏布局</title>
    <link rel="icon" href="./images/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/all.css">
    <link rel="stylesheet" href="./css/detail.css">
  </head>

  <body>
    <!-- 项目的最外层 -->
    <div class="outer">
      <!-- 窗口侧边栏 -->
      <div class="toolbar toolbar-wrap">
        <div class="content"></div>
        <div class="but list"></div>
        <div class="toolist">
          <div class="pull">
            <i class="tab-ico vip"></i>
            <em class="tab-text">商品会员</em>
          </div>
          <div class="pull">
            <i class="tab-ico cart"></i>
            <em class="tab-text">购物车</em>
          </div>
          <div class="pull">
            <i class="tab-ico follow"></i>
            <em class="tab-text">我的关注</em>
          </div>
          <div class="pull">
            <i class="tab-ico history"></i>
            <em class="tab-text">我的足迹</em>
          </div>
          <div class="pull">
            <i class="tab-ico message"></i>
            <em class="tab-text">我的消息</em>
          </div>
          <div class="pull">
            <i class="tab-ico jimi"></i>
            <em class="tab-text">咨询</em>
          </div>
        </div>
        <div class="back pull">
          <i class="tab-ico top"></i>
          <em class="tab-text">顶部</em>
        </div>
      </div>
      <!-- 头部 -->
      <header class="header">
        <!-- 头部的第一行 -->
        <div class="top">
          <div class="container">
            <div class="loginList">
              <p>尚品汇欢迎您！</p>
              <p>
                <span>请</span>
                <a href="###">登录</a>
                <a href="###" class="register">免费注册</a>
              </p>
            </div>
            <div class="typeList">
              <a href="###">我的订单</a>
              <a href="###">我的购物车</a>
              <a href="###">我的尚品汇</a>
              <a href="###">尚品汇会员</a>
              <a href="###">企业采购</a>
              <a href="###">关注尚品汇</a>
              <a href="###">合作招商</a>
              <a href="###">商家后台</a>
            </div>
          </div>
        </div>
        <!--头部第二行 搜索区域-->
        <div class="bottom">
          <h1 class="logoArea">
            <a class="logo" title="尚品汇" href="###" target="_blank">
              <img src="./images/Logo.png" alt="">
            </a>
          </h1>
          <div class="searchArea">
            <form action="###" class="searchForm">
              <input type="text" id="autocomplete" class="input-error input-xxlarge" />
              <button class="sui-btn btn-xlarge btn-danger" type="button">搜索</button>
            </form>
          </div>
        </div>
      </header>

      <!-- 商品分类导航 -->
      <div class="typeNav">
        <div class="container">
          <h2 class="all">全部商品分类</h2>
          <nav class="nav">
            <a href="###">服装城</a>
            <a href="###">美妆馆</a>
            <a href="###">尚品汇超市</a>
            <a href="###">全球购</a>
            <a href="###">闪购</a>
            <a href="###">团购</a>
            <a href="###">有趣</a>
            <a href="###">秒杀</a>
          </nav>
        </div>
      </div>

      <!-- 主要内容区域 -->
      <section class="con">
        <!-- 导航路径区域 -->
        <div class="conPoin">
          <div class="conPoin">
            <a href="###">手机、数码、通讯</a>
            <a href="###">手机</a>
            <a href="###">Apple苹果</a>
            <a>iphone 6S系类</a>
          </div>
        </div>
        <!-- 主要内容区域 -->
        <div class="mainCon">
          <!-- 左侧放大镜区域 -->
          <div class="previewWrap">
            <!--放大镜效果-->
            <div class="preview">
              <div class="jqzoom">
                <img src="./images/s1.png" />
              </div>
            </div>
            <!--下方的缩略图-->
            <div class="specScroll">
              <!--左按钮-->
              <a class="prev">&lt;</a>
              <!-- 中间可滑动区域 -->
              <div class="items">
                <div class="itemsCon">

                </div>
              </div>
              <!--右按钮-->
              <a class="next">&gt;</a>
            </div>
          </div>
          <!-- 右侧选择区域布局 -->
          <div class="InfoWrap">
            <div class="goodsDetail">

            </div>

            <div class="choose">
              <div class="chooseArea">
                <div class="choosed"></div>
              </div>

              <div class="cartWrap">
                <div class="controls">
                  <input autocomplete="off" value="1" class="itxt" />
                  <a href="###" class="plus">+</a>
                  <a href="###" class="mins">-</a>
                </div>
                <div class="add">
                  <a href="###" target="_blank">加入购物车</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 内容详情页 -->
      <section class="productDetail">
        <aside class="aside">
          <div class="tabWraped">
            <h4 class="active">相关分类</h4>
            <h4>推荐品牌</h4>
          </div>
          <div class="tabContent">
            <div class="tab-pane active">
              <ul class="partList">
                <li>手机</li>
                <li>手机壳</li>
                <li>内存卡</li>
                <li>Iphone配件</li>
                <li>贴膜</li>
                <li>手机耳机</li>
                <li>移动电源</li>
                <li>平板电脑</li>
              </ul>
              <ul class="goodsList">
                <li>
                  <div class="list-wrap">
                    <div class="p-img">
                      <img src="./images/part01.png" />
                    </div>
                    <div class="attr">Apple苹果iPhone 6s (A1699) </div>
                    <div class="price">
                      <em>¥</em>
                      <i>6088.00</i>
                    </div>
                    <div class="operate">
                      <a href="javascript:void(0);">加入购物车</a>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="list-wrap">
                    <div class="p-img">
                      <img src="./images/part02.png" />
                    </div>
                    <div class="attr">
                      <em>Apple苹果iPhone 6s (A1699)</em>
                    </div>
                    <div class="price">
                      <strong>
                        <em>¥</em>
                        <i>6088.00</i>
                      </strong>
                    </div>
                    <div class="operate">
                      <a href="javascript:void(0);">加入购物车</a>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="list-wrap">
                    <div class="p-img">
                      <img src="./images/part03.png" />
                    </div>
                    <div class="attr">
                      <em>Apple苹果iPhone 6s (A1699)</em>
                    </div>
                    <div class="price">
                      <strong>
                        <em>¥</em>
                        <i>6088.00</i>
                      </strong>
                    </div>
                    <div class="operate">
                      <a href="javascript:void(0);">加入购物车</a>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="list-wrap">
                    <div class="p-img">
                      <img src="./images/part02.png" />
                    </div>
                    <div class="attr">
                      <em>Apple苹果iPhone 6s (A1699)</em>
                    </div>
                    <div class="price">
                      <strong>
                        <em>¥</em>
                        <i>6088.00</i>
                      </strong>
                    </div>
                    <div class="operate">
                      <a href="javascript:void(0);">加入购物车</a>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="list-wrap">
                    <div class="p-img">
                      <img src="./images/part03.png" />
                    </div>
                    <div class="attr">
                      <em>Apple苹果iPhone 6s (A1699)</em>
                    </div>
                    <div class="price">
                      <strong>
                        <em>¥</em>
                        <i>6088.00</i>
                      </strong>
                    </div>
                    <div class="operate">
                      <a href="javascript:void(0);">加入购物车</a>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <div class="tab-pane">
              <p>推荐品牌</p>
            </div>
        </aside>
        <div class="detail">
          <div class="fitting">
            <h4 class="kt">选择搭配</h4>
            <div class="good-suits">
              <div class="master">
                <img src="./images/l-m01.png" />
                <p>￥5299</p>
                <i>+</i>
              </div>
              <ul class="suits">
                <li class="suitsItem">
                  <img src="./images/dp01.png" />
                  <p>Feless费勒斯VR</p>
                  <label>
                    <input type="checkbox" value="39">
                    <span>39</span>
                  </label>
                </li>
                <li class="suitsItem">
                  <img src="./images/dp02.png" />
                  <p>Feless费勒斯VR</p>
                  <label>
                    <input type="checkbox" value="50">
                    <span>50</span>
                  </label>
                </li>
                <li class="suitsItem">
                  <img src="./images/dp03.png" />
                  <p>Feless费勒斯VR</p>
                  <label>
                    <input type="checkbox" value="59">
                    <span>59</span>
                  </label>
                </li>
                <li class="suitsItem">
                  <img src="./images/dp04.png" />
                  <p>Feless费勒斯VR</p>
                  <label>
                    <input type="checkbox" value="99">
                    <span>99</span>
                  </label>
                </li>
              </ul>
              <div class="result">
                <div class="num">已选购0件商品</div>
                <div class="price-tit">
                  套餐价
                </div>
                <div class="price">￥5299</div>
                <button class="addshopcar">加入购物车</button>
              </div>
            </div>
          </div>
          <div class="intro">
            <ul class="tab-wraped">
              <li class="active">
                <a href="###">
                  商品介绍
                </a>
              </li>
              <li>
                <a href="###">
                  规格与包装
                </a>
              </li>
              <li>
                <a href="###">
                  售后保障
                </a>
              </li>
              <li>
                <a href="###">
                  商品评价
                </a>
              </li>
              <li>
                <a href="###">
                  手机社区
                </a>
              </li>
            </ul>
            <div class="tab-content">
              <div id="one" class="tab-pane active">
                <ul class="goods-intro">
                  <li>分辨率：1920*1080(FHD)</li>
                  <li>后置摄像头：1200万像素</li>
                  <li>前置摄像头：500万像素</li>
                  <li>核 数：其他</li>
                  <li>频 率：以官网信息为准</li>
                  <li>品牌： Apple</li>
                  <li>商品名称：APPLEiPhone 6s Plus</li>
                  <li>商品编号：1861098</li>
                  <li>商品毛重：0.51kg</li>
                  <li>商品产地：中国大陆</li>
                  <li>热点：指纹识别，Apple Pay，金属机身，拍照神器</li>
                  <li>系统：苹果（IOS）</li>
                  <li>像素：1000-1600万</li>
                  <li>机身内存：64GB</li>
                </ul>
                <div class="intro-detail">
                  <img src="./images/intro01.png" />
                  <img src="./images/intro02.png" />
                  <img src="./images/intro03.png" />
                </div>
              </div>
              <div id="two" class="tab-pane">
                <p>规格与包装</p>
              </div>
              <div id="three" class="tab-pane">
                <p>售后保障</p>
              </div>
              <div id="four" class="tab-pane">
                <p>商品评价</p>
              </div>
              <div id="five" class="tab-pane">
                <p>手机社区</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 猜你喜欢 -->
      <div class="like">
        <h4 class="kt">猜你喜欢</h4>
        <ul class="like-list">
          <li class="likeItem">
            <div class="p-img">
              <img src="./images/itemlike01.png" />
            </div>
            <div class="attr">
              <em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
            </div>
            <div class="price">
              <em>¥</em>
              <i>3699.00</i>
            </div>
            <div class="commit">已有6人评价
            </div>
          </li>
          <li class="likeItem">
            <div class="p-img">
              <img src="./images/itemlike02.png" />
            </div>
            <div class="attr">
              Apple苹果iPhone 6s/6s Plus 16G 64G 128G
            </div>
            <div class="price">
              <em>¥</em>
              <i>4388.00</i>
            </div>
            <div class="commit">已有700人评价
            </div>
          </li>
          <li class="likeItem">
            <div class="p-img">
              <img src="./images/itemlike03.png" />
            </div>
            <div class="attr">DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本
            </div>
            <div class="price">
              <em>¥</em>
              <i>4088.00</i>
            </div>
            <div class="commit">已有700人评价
            </div>
          </li>
          <li class="likeItem">
            <div class="p-img">
              <img src="./images/itemlike04.png" />
            </div>
            <div class="attr">DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本
            </div>
            <div class="price">
              <em>¥</em>
              <i>4088.00</i>
            </div>
            <div class="commit">已有700人评价
            </div>
          </li>
          <li class="likeItem">
            <div class="p-img">
              <img src="./images/itemlike05.png" />
            </div>
            <div class="attr">DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本
            </div>
            <div class="price">
              <em>¥</em>
              <i>4088.00</i>
            </div>
            <div class="commit">已有700人评价
            </div>
          </li>
          <li class="likeItem">
            <div class="p-img">
              <img src="./images/itemlike06.png" />
            </div>
            <div class="attr">DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本
            </div>
            <div class="price">
              <em>¥</em>
              <i>4088.00</i>
            </div>
            <div class="commit">已有700人评价
            </div>
          </li>
        </ul>
      </div>

      <!-- 底部 -->
      <div class="footer">
        <div class="footer-container">
          <div class="footerList">
            <div class="footerItem">
              <h4>购物指南</h4>
              <ul class="footerItemCon">
                <li>购物流程</li>
                <li>会员介绍</li>
                <li>生活旅行/团购</li>
                <li>常见问题</li>
                <li>购物指南</li>
              </ul>

            </div>
            <div class="footerItem">
              <h4>配送方式</h4>
              <ul class="footerItemCon">
                <li>上门自提</li>
                <li>211限时达</li>
                <li>配送服务查询</li>
                <li>配送费收取标准</li>
                <li>海外配送</li>
              </ul>
            </div>
            <div class="footerItem">
              <h4>支付方式</h4>
              <ul class="footerItemCon">
                <li>货到付款</li>
                <li>在线支付</li>
                <li>分期付款</li>
                <li>邮局汇款</li>
                <li>公司转账</li>
              </ul>
            </div>
            <div class="footerItem">
              <h4>售后服务</h4>
              <ul class="footerItemCon">
                <li>售后政策</li>
                <li>价格保护</li>
                <li>退款说明</li>
                <li>返修/退换货</li>
                <li>取消订单</li>
              </ul>
            </div>
            <div class="footerItem">
              <h4>特色服务</h4>
              <ul class="footerItemCon">
                <li>夺宝岛</li>
                <li>DIY装机</li>
                <li>延保服务</li>
                <li>尚品汇E卡</li>
                <li>尚品汇通信</li>
              </ul>
            </div>
            <div class="footerItem">
              <h4>帮助中心</h4>
              <img src="./images/wx_cz.jpg">
            </div>
          </div>
          <div class="copyright">
            <ul class="helpLink">
              <li>关于我们
                <span class="space"></span>
              </li>
              <li>联系我们
                <span class="space"></span>
              </li>
              <li>关于我们
                <span class="space"></span>
              </li>
              <li>商家入驻
                <span class="space"></span>
              </li>
              <li>营销中心
                <span class="space"></span>
              </li>
              <li>友情链接
                <span class="space"></span>
              </li>
              <li>关于我们
                <span class="space"></span>
              </li>
              <li>营销中心
                <span class="space"></span>
              </li>
              <li>友情链接
                <span class="space"></span>
              </li>
              <li>关于我们</li>
            </ul>
            <p>地址：北京市昌平区宏福科技园综合楼6层</p>
            <p>京ICP备19006430号</p>
          </div>
        </div>
      </div>
    </div>
    <script src="./js/data.js"></script>
    <script>
      /*
            1.添加了addCart函数   点击加入购物车功能（使用localStorage实现）
        */
      window.addEventListener("DOMContentLoaded", function () {
        //保存当前缩略图的下标
        let magnifierImgID = 0;
        //当前的商品数量
        let goodsChangeNum = 1;

        // 1.放大镜效果
        magnifier()

        function magnifier() {
          //模拟数据后台加载 数据中每一个对象是一个图片的大图和小图
          let imgsrc = goodDate.imgsrc;
          //修改放大镜的图片变为动态加载
          //获取放大镜效果的小图
          let oJqzoomImg = document.querySelector(".jqzoom img");
          //设置图片src
          oJqzoomImg.src = imgsrc[magnifierImgID].s;


          //获取外层元素
          let oPreview = document.querySelector(".con .mainCon .previewWrap .preview");
          // 获取小图元素
          let oJqzoom = document.querySelector(".con .mainCon .previewWrap .preview .jqzoom");
          let oMask = null; //初始化蒙版元素
          let oMaxBox = null; //初始化大图外层
          let oMaxImg = null; //初始化大图


          //当放大镜的外层被鼠标移入触发
          oPreview.onmouseenter = function (ev) {
            //判断蒙版是否已经存在
            if (!oMask) {
              //创建蒙版
              oMask = document.createElement("div");
              //给蒙版以添加类名，类名样式书写在css中
              oMask.className = "mask";
              //插入蒙版
              oJqzoom.appendChild(oMask);
            }
            if (!oMaxBox) {
              //创建大图外层
              oMaxBox = document.createElement("div");
              //添加样式
              oMaxBox.className = "maxbox";
              // 插入大图
              oPreview.appendChild(oMaxBox);
              //创建图片
              oMaxImg = new Image();
              // oMaxImg.src = "./images/b1.png";
              //当创建大图的时候，根据当前小图的src 获取大图的对应的src
              oMaxImg.src = imgsrc[magnifierImgID].b;


              // 大图插入大图外层
              oMaxBox.appendChild(oMaxImg);
            }
            // 鼠标移动事件
            oPreview.onmousemove = function (e) {
              //获取蒙版left 和 top 的位置
              var maskPosition = {
                left: e.clientX - oMask.offsetWidth / 2 - oJqzoom
                  .getBoundingClientRect().left,
                top: e.clientY - oMask.offsetHeight / 2 - oJqzoom
                  .getBoundingClientRect().top,
              }
              //判断临界值
              if (maskPosition.left <= 0) {
                maskPosition.left = 0;
              } else if (maskPosition.left >= oJqzoom.clientWidth - oMask.offsetWidth) {
                maskPosition.left = oJqzoom.clientWidth - oMask.offsetWidth;
              }
              if (maskPosition.top <= 0) {
                maskPosition.top = 0;
              } else if (maskPosition.top >= oJqzoom.clientHeight - oMask.offsetHeight) {
                maskPosition.top = oJqzoom.clientHeight - oMask.offsetHeight;
              }

              //对蒙版赋值
              oMask.style.left = maskPosition.left + "px";
              oMask.style.top = maskPosition.top + "px";

              //计算比例：（蒙版可以移动的距离 /  大图能够被移动的距离）
              var scale = (oJqzoom.clientWidth - oMask.offsetWidth) / (oMaxImg.offsetWidth -
                oMaxBox.clientWidth);
              //计算大图移动的位置
              var maxPosition = {
                left: maskPosition.left / scale,
                top: maskPosition.top / scale
              }
              oMaxImg.style.marginTop = -maxPosition.top + "px";
              oMaxImg.style.marginLeft = -maxPosition.left + "px";
            }
            //鼠标离开函数
            oPreview.onmouseleave = function () {
              //移除DOM节点
              oJqzoom.removeChild(oMask);
              oPreview.removeChild(oMaxBox);
              //初始化为null
              oMask = null;
              oMaxBox = null;
              oMaxImg = null;
              //解绑事件
              oPreview.onmousemove = null;
              oPreview.obmouseleave = null;
            }
          }
        }

        //2.缩略图效果
        thumbnail();

        function thumbnail() {

          //进行移动动画的容器
          let oScrollDiv = document.querySelector(".specScroll .items .itemsCon");

          //动态生成缩略图数据
          goodDate.imgsrc.forEach(function (item, index) {
            let oImg = new Image();
            oImg.src = item.s;
            oScrollDiv.appendChild(oImg);
          })


          //移动容器里的集合
          let oScrollItems = document.querySelectorAll(".specScroll .items .itemsCon img");
          // 获取左右按钮
          let oNext = document.querySelector(".specScroll .next");
          let oPrev = document.querySelector(".specScroll .prev");

          let tempLength = 0; //临时变量,当前移动的长度
          let viewNum = 5; //获取每次显示图片的个数量
          let moveNum = 2; //每次移动的数量
          //计算每次移动的长度（ 每个元素的宽度*要移动的数量）
          let moveLength = oScrollItems[0].offsetWidth * moveNum;
          //计算总可以移动的长度（总共可以移动的数量 * 单个长度）
          let countLength = (oScrollItems.length - viewNum) * oScrollItems[0].offsetWidth;

          //添加动画过渡
          oScrollDiv.style.transition = "all .5s"


          //下一张按钮事件
          oNext.onclick = function () {
            //如果已经走过去的距离 小于  总共可以总动的长度 才可以继续走
            if (tempLength < countLength) {
              // 如果剩余可以走的长度 如果大于 每次移动的长度，则每次就走该走的长度
              // 否则直接走到最后即可
              if ((countLength - tempLength) > moveLength) {
                tempLength += moveLength;
                oScrollDiv.style.left = -tempLength + "px";
              } else {
                tempLength += (countLength - tempLength);
                oScrollDiv.style.left = -tempLength + "px";
              }
            }
          }

          //上一张按钮事件
          oPrev.onclick = function () {
            // 如果可以走的距离还大于0，则走该走的长度
            // 否则直接等于0
            if (tempLength >= 0) {
              if (tempLength > moveLength) {
                tempLength -= moveLength;
                oScrollDiv.style.left = -tempLength + "px";
              } else {
                tempLength = 0;
                oScrollDiv.style.left = tempLength + "px";

              }
            }
          }
        }

        //3.缩略图点击效果
        thumbnailClick();

        function thumbnailClick() {
          //获取每一张图片
          let oScrollItems = document.querySelectorAll(".specScroll .items .itemsCon img");
          //获取放大镜效果的小图
          let oJqzoomImg = document.querySelector(".jqzoom img");
          //多所有的图片绑定点击事件
          for (let i = 0; i < oScrollItems.length; i++) {
            oScrollItems[i].onclick = function () {

              magnifierImgID = i;
              oJqzoomImg.src = this.src;
            }
          }
        }

        //4.商品筛选详情
        screening();

        function screening() {
          let oChoose = document.querySelector('.InfoWrap .choose');
          let oChooseDetail = document.querySelector('.InfoWrap .choose .chooseArea');
          let crumbData = goodDate.goodsDetail.crumbData;
          //利用dom动态添加元素 遍历crumbData数据生成dl和dt
          for (let i = 0; i < crumbData.length; i++) {
            // 创建dl dt 元素，并给dt赋值，给dt设置类名
            let oDl = document.createElement('dl');
            let oDt = document.createElement('dt');
            oDt.className = "title";
            oDt.innerHTML = crumbData[i].title;
            //把dt插入到dl中
            oDl.appendChild(oDt);
            //遍历每一个列表中的data 生成dd
            for (var j = 0; j < crumbData[i].data.length; j++) {
              //生成dd
              let oDd = document.createElement("dd");
              //给dd添加自定义属性 保存价钱的修改 
              oDd.setAttribute("changePirce", crumbData[i].data[j].changePrice)
              //给dd插入内容
              oDd.innerHTML = crumbData[i].data[j].type;
              // 把dd插入到dl中
              oDl.appendChild(oDd);
            }
            // 把dl插入到choose中
            oChooseDetail.appendChild(oDl);
          }


          let oChoosed = document.querySelector('.InfoWrap .choose .chooseArea .choosed');
          //获取外层dl标签
          let oDl = oChooseDetail.getElementsByTagName('dl');
          //定义数组，数组中保存筛选条件，需要的时候按顺序保存和获取里边的条件
          //并且保证只有4个值，当组数据更换的时候直接替换原有位置的值    
          let arr = [];
          //先将数组中存放oDl.length个0，方便接下来按dl的顺序存放数据
          for (let i = 0; i < oDl.length; i++) {
            arr.push(0);
          }

          //遍历所有的dl标签
          for (let i = 0; i < oDl.length; i++) {
            //给每一个dl扩展一个prevNode属性，用来记录点击的dd标签
            oDl[i].prevNode = null;
            //记录每一个dl的下标
            oDl[i].index = i;
            // 获取每一个dl中的所有dd标签
            let oDd = oDl[i].getElementsByTagName('dd');
            //遍历当前dl的所有的dd标签
            for (let j = 0; j < oDd.length; j++) {
              // 给当前遍历到的dl中的所有dd绑定点击事件
              oDd[j].onclick = function () {
                //获取当前点击a标签所在的dl
                let parent = this.parentNode;

                //点击前先清空所有颜色
                for (let j = 0; j < oDd.length; j++) {
                  oDd[j].style.color = "#666";
                }

                //把当前点击的元素设置颜色为红色
                this.style.color = 'red';

                // 在数组对应的位置替换上当前选中的值
                arr[parent.index] = this;
                //清空之前的盛放选中值的容器
                oChoosed.innerHTML = '';

                priceSum(arr);

                //每次点击的时候重新遍历整个盛放数据的数组 渲染元素
                for (let i = 0; i < arr.length; i++) {
                  //只有当arr[i]的值不为0时，也即与下标对应的第i个li中有被选中的时候才执行下面的代码
                  if (arr[i]) {
                    //检测数组，每次创建了mark元素
                    let oChomark = document.createElement('mark');
                    // 每次把在mark元素中放入响应的数据
                    oChomark.innerHTML = arr[i].innerHTML;
                    // 创建a标签 用来删除
                    let oCxa = document.createElement('a');
                    oCxa.innerHTML = 'X';
                    //给a标签设置一个自定义属性，用来将来删除的时候，判断删除的是哪一个
                    oCxa.setAttribute('name', i);
                    oChomark.appendChild(oCxa);
                    oChoosed.appendChild(oChomark);
                  }
                }
                //设置parent就是当前dl  dl的preNode属性保存这次点击的dl中的dd
                parent.prevNode = this;


                //点击删除功能
                //初始化一个代表当前点击元素下标变量的默认值
                let num = 0;
                // 获取所有的mark中的a标签
                let ChoseA = oChoosed.querySelectorAll('mark a');
                for (let i = 0; i < ChoseA.length; i++) {
                  ChoseA[i].index = i;
                  // 对所有的a绑定点击事件
                  ChoseA[i].onclick = function () {
                    // 获取当前点击的a是哪一个dl的  之前设置过自定义属性
                    num = parseInt(this.getAttribute(
                      'name')); //得到删除a标签在第几个li中（记得将字符串格式转化为数字格式）
                    // 移除当前点击a标签的父级mark元素
                    this.parentNode.remove();
                    //让当前点击的dl中的dd颜色清除
                    oDl[num].prevNode.style.color = '';
                    oDl[num].querySelector("dd:nth-of-type(1)").style.color = 'red';
                    // 让当前点击的a对应的dl在数组数据中为空
                    arr[num] = 0; //让删除的元素在数组中对应下标的值变为0

                    priceSum(arr)
                  }
                }
              }
            }
          }
          // 计算价钱函数
          function priceSum(arr) {
            //根据当前数组中的值重新计算价钱
            //初始化默认价钱
            let newPrice = goodDate.goodsDetail.price * goodsChangeNum;
            arr.forEach(function (item, index) {
              if (item) {
                newPrice += parseInt(item.getAttribute("changePirce")) * goodsChangeNum;
              }
            })
            let oPrice = document.querySelector(".price em");
            oPrice.innerHTML = newPrice;

            //改变搭配选择的价钱
            let choosePrice = document.querySelector(".good-suits .master p");
            choosePrice.innerHTML = "¥" + newPrice;
            //改变搭配总价钱
            let oChooseAllPrice = document.querySelector(".good-suits .result .price");
            let chooseAllPrice = newPrice;
            let oChooseAllCheckBoxs = document.querySelectorAll(
              ".good-suits .suits input[type=checkbox]");
            oChooseAllCheckBoxs.forEach(function (item, index) {
              if (item.checked) {
                chooseAllPrice += parseInt(item.value)
              }
            })
            oChooseAllPrice.innerHTML = "¥" + chooseAllPrice;
          }
        }

        //5.商品数量交互
        goodsNum();

        function goodsNum() {
          let oPlus = document.querySelector(
            ".outer .con .mainCon .InfoWrap .choose .cartWrap .controls .plus");
          let oMins = document.querySelector(
            ".outer .con .mainCon .InfoWrap .choose .cartWrap .controls .mins");
          let oItxt = document.querySelector(
            ".outer .con .mainCon .InfoWrap .choose .cartWrap .controls .itxt");
          //设置默认数量
          oItxt.value = goodsChangeNum;
          // 默认数量
          let num = 1;
          oItxt.value = num;
          oPlus.onclick = function () {
            goodsChangeNum++;
            oItxt.value = goodsChangeNum;

            //当价钱改变的时候 获取当前价钱 然后计算总价赋值
            let oPrice = document.querySelector(".price em");
            // 原来的价钱/原来的数量 得到一个的价钱，再乘以当前改变后的数量
            let finalPrice = oPrice.innerHTML / (goodsChangeNum - 1) * goodsChangeNum;
            oPrice.innerHTML = finalPrice;
            changeFittingPrice(finalPrice)
          }
          oMins.onclick = function () {
            if (goodsChangeNum > 1) {
              goodsChangeNum--;
              oItxt.value = goodsChangeNum;
              let oPrice = document.querySelector(".price em");
              let finalPrice = oPrice.innerHTML / (goodsChangeNum + 1) * goodsChangeNum;
              oPrice.innerHTML = finalPrice;
              changeFittingPrice(finalPrice)
            }

          }
          // 改变搭配价钱函数
          function changeFittingPrice(finalPrice) {
            //改变搭配选择的价钱
            let choosePrice = document.querySelector(".good-suits .master p");
            choosePrice.innerHTML = "¥" + finalPrice;
            //改变搭配总价钱
            let oChooseAllPrice = document.querySelector(".good-suits .result .price");
            let chooseAllPrice = finalPrice;
            let oChooseAllCheckBoxs = document.querySelectorAll(
              ".good-suits .suits input[type=checkbox]");
            oChooseAllCheckBoxs.forEach(function (item, index) {
              if (item.checked) {
                finalPrice += parseInt(item.value)
              }
            })
            oChooseAllPrice.innerHTML = "¥" + finalPrice;
          }
        }

        //6.路径导航动态生成
        pathURL();

        function pathURL() {
          // goodDate.path = ["手机、数码、通讯", "手机", "Apple苹果", "iphone 6S系类"];
          let oConPoin = document.querySelector(".conPoin");
          goodDate.path.forEach(function (item, index) {
            let oA = document.createElement("a");
            if (index == goodDate.path.length - 1) {
              oA.innerHTML = item.title;
              oConPoin.appendChild(oA);
            } else {
              oA.href = item.url;
              oA.innerHTML = item.title;
              oConPoin.appendChild(oA);
            }
          })
        }

        //7.商品详情的数据动态生成
        goodsDetail();

        function goodsDetail() {
          let goodsCon = goodDate.goodsDetail;
          let oGoodsDetail = document.querySelector(".con .mainCon .InfoWrap .goodsDetail");
          let oGoodsDetailContent = `<h3 class="InfoName">${goodsCon.title}</h3>
                        <p class="news">${goodsCon.recommend}</p>
                        <div class="priceArea">
                            <div class="priceArea1">
                                <div class="title">价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</div>
                                <div class="price">
                                    <i>¥</i>
                                    <em>${goodsCon.price}</em>
                                    <span>降价通知</span>
                                </div>
                                <div class="remark">
                                    <i>累计评价</i>
                                    <em>${goodsCon.evaluateNum}</em>
                                </div>
                            </div>
                            <div class="priceArea2">
                                <div class="title">
                                    <i>促&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</i>
                                </div>
                                <div class="fixWidth">
                                    <i class="red-bg">${goodsCon.promoteSales.type}</i>
                                    <em
                                        class="t-gray">${goodsCon.promoteSales.content}</em>
                                </div>
                            </div>
                        </div>
                        <div class="support">
                            <div class="supportArea">
                                <div class="title">支&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;持</div>
                                <div class="fixWidth">${goodsCon.support}</div>
                            </div>
                            <div class="supportArea">
                                <div class="title">配 送 至</div>
                                <div class="fixWidth">${goodsCon.address}</div>
                            </div>
                        </div>`;

          oGoodsDetail.innerHTML = oGoodsDetailContent;

        }


        //8.选项卡切换的封装
        function Tab(btn, Content) {
          this.tabBtn = btn;
          this.tabDiv = Content;
          for (let i = 0; i < this.tabBtn.length; i++) {
            this.tabBtn[i].index = i;
            let _this = this; //this指向的是var tab = new Tab() ，即tab这个对象，注意是对象。
            this.tabBtn[i].onclick = function () {
              _this.clickBtn(
                this); //这句话里面的_this指向的是var tab = new Tab()构造函数这个对象，括号里面的this指向的点击事件对应的这个对象，这里的指的是input这个标签
            };
          }
        }
        Tab.prototype.clickBtn = function (btn) {
          for (let k = 0; k < this.tabBtn.length; k++) {
            this.tabBtn[k].className = ''; //clickBtn这个方法里面的this指向的是var tab = new Tab() ，即tab这个对象
            this.tabDiv[k].style.display = 'none';
          }
          btn.className = 'active';
          this.tabDiv[btn.index].style.display = 'block';
        }


        //9.侧边栏选项卡切换交互
        asideNav();

        function asideNav() {
          let oTabBtn = document.querySelectorAll(".tabWraped h4");
          let oTabPane = document.querySelectorAll(".tabContent .tab-pane");
          new Tab(oTabBtn, oTabPane)
        }

        //10.选择搭配价钱
        fittingPrice();

        function fittingPrice() {

          let oChooseAllPrice = document.querySelector(".good-suits .result .price");
          let oChooseAllCheckBoxs = document.querySelectorAll(".good-suits .suits input[type=checkbox]");
          //对所有的多选框绑定事件 只要多选框状态发生改变就会触发
          oChooseAllCheckBoxs.forEach(function (item, index) {
            item.onchange = function () {
              let oChoosePrice = document.querySelector(".good-suits .master p");
              let choosePrice = parseInt(oChoosePrice.innerHTML.substr(1));
              oChooseAllCheckBoxs.forEach(function (item, index) {
                console.log(item)
                if (item.checked) {
                  choosePrice += parseInt(item.value)
                }
              })
              oChooseAllPrice.innerHTML = "¥" + choosePrice;

            }
          })
        }

        //11.详情页评论区TAB切换功能
        intro();

        function intro() {
          let oTabWrap = document.querySelector(".intro");
          let oTabBtn = oTabWrap.querySelectorAll(".intro .tab-wraped li");
          let oTabPane = oTabWrap.querySelectorAll(".intro .tab-content .tab-pane");
          new Tab(oTabBtn, oTabPane)
        }

        //12.侧边栏效果
        asideShow();

        function asideShow() {
          var pull = document.getElementsByClassName('pull');
          var tabtext = document.getElementsByClassName('tab-text');
          var tabico = document.getElementsByClassName('tab-ico');
          for (var i = 0; i < pull.length; i++) {
            (function (n) {
              pull[n].onmouseover = function () {
                tabtext[n].style.left = "-59px";
                tabico[n].style.backgroundColor = "#c81623";
                tabtext[n].style.backgroundColor = "#c81623";
                //				alert(text[n].backgroundColor);
              }
              pull[n].onmouseleave = function () {
                tabtext[n].style.left = "35px";
                tabico[n].style.backgroundColor = "#7a6e6e";
                tabtext[n].style.backgroundColor = "#7a6e6e";

              }
            })(i);
          }
          /*
            侧边栏按钮
          */
          var bnt = document.getElementsByClassName('but')[0];
          var toolbar = document.getElementsByClassName('toolbar')[0];
          bnt.onmousedown = function () {
            if (bnt.className == 'but list') {
              //		alert("hehehe");
              toolbar.className = "toolbar toolbar-out";
              bnt.className = "but pull-wrap";
            } else {
              toolbar.className = "toolbar toolbar-wrap";
              bnt.className = "but list";
            }
          }
        }

        //加入购物车功能
        addCart();

        function addCart() {
          let addShopCart = document.querySelector(
            ".outer .con .mainCon .InfoWrap .choose .cartWrap .add a");
          addShopCart.onclick = function () {
            let goodPrice = parseInt(document.querySelector(
                ".outer .con .mainCon .InfoWrap .priceArea .priceArea1 .price em")
              .innerHTML);
            let goodTitle = document.querySelector(".outer .con .mainCon .InfoWrap .InfoName")
              .innerHTML;
            let goodNum = document.querySelector(
              ".outer .con .mainCon .InfoWrap .choose .cartWrap .controls .itxt").value;
            let goodImg = "./images/goods1.png";
            let goodTxt = "国民最爱";

            //存入localStorage
            let goodCon = {
              goodPrice,
              goodTitle,
              goodNum,
              goodImg,
              goodTxt
            }

            localStorage.setItem("goodCon", JSON.stringify(goodCon));
            location.href = "./cart.html";
          }
        }
      })
    </script>
  </body>

</html>